<template>
  <div>
    <Row class="row">
      <Col span="6"
        >平台有型差异：{{
          this.getYuan(this.settleException.platformHasAmount)
        }}
        元</Col
      >
      <Col span="6"
        >平台无型差异：{{
          this.getYuan(this.settleException.platformNoneAmount)
        }}
        元</Col
      >
      <Col span="6"
        >双边型差异：{{
          this.getYuan(this.settleException.bilateralAmount)
        }}
        元</Col
      >
      <Col span="6"
        >差异合计：{{
          this.getYuan(this.settleException.exceptionTotal)
        }}
        元</Col
      >
    </Row>
    <Row class="row">
      <RemoteTable
        ref="remoteTable"
        :namespace="namespace"
        :columns="columns"
        :selected="selectedData"
        :isFixedHeader="true"
        :needQueryParam="true"
        @onSelectionChange="selectList"
      >
        <Button @click="handleShowRemark">备注</Button>
      </RemoteTable>
    </Row>
    <Modal
      v-model="showRemark"
      title="差异备注"
      width="400px"
      @on-ok="submitDiffCause"
      :loading="sumiting"
    >
      <Row class="row">
        <Col span="5" type="flex" align="middle">差异原因</Col>
        <Col span="16">
          <Select v-model="remark" filterable placeholder="请选择" clearable>
            <Option
              :value="item.name"
              v-for="item in diffCauseList"
              :key="item.id"
              >{{ item.name }}</Option
            >
          </Select>
        </Col>
        <Col span="2" offset="1">
          <Button
            shape="circle"
            icon="md-refresh"
            size="small"
            @click="refreshRemark"
          ></Button>
        </Col>
      </Row>
      <Row class="row">
        <Col span="6" offset="18">
          <a @click="remarkManage" class="href">管理差异备注</a>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { Row, Col, Button, Modal, Select, Option, Message } from "view-design";
import RemoteTable from "@/components/RemoteTable";
import util from "@/utils/util";

export default {
  name: "abnormal_form",
  components: {
    Row,
    Col,
    RemoteTable,
    Button,
    Modal,
    Select,
    Option,
  },
  props: {
    namespace: { type: String },
    settleSummary: Object,
    diffCauseList: Array,
  },
  watch: {
    settleSummary: {
      deep: true, // 深度监听
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal.checkCode) {
          this.querySettleException();
          this.queryListData();
        }
      },
    },
  },
  data() {
    return {
      columns: [
        {
          type: "selection",
          align: "center",
          // fixed: "left",
          minWidth: 55,
        },
        {
          title: "交易时间",
          key: "orderCreateDt",
          align: "center",
          minWidth: 150,
        },
        {
          title: "应清时间",
          key: "targetClearDate",
          align: "center",
          minWidth: 150,
        },
        {
          title: "子订单号",
          key: "subOrderId",
          align: "center",
          minWidth: 180,
        },
        {
          title: "渠道支付单号",
          key: "flowId",
          align: "center",
          minWidth: 180,
        },
        {
          title: "商户名称",
          key: "merchantName",
          align: "center",
          minWidth: 150,
        },
        {
          title: "应收金额(元)",
          align: "center",
          key: "subOrderAmount",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.subOrderAmount / 100;
            return h("span", util.toMoney(item));
          },
        },
        {
          title: "实收金额(元)",
          key: "payAmount",
          align: "center",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.payAmount / 100;
            return h("span", util.toMoney(item));
          },
        },
        {
          title: "优惠金额(元)",
          key: "discount",
          align: "center",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.discount / 100;
            return h("span", util.toMoney(item));
          },
        },
        {
          title: "退款金额",
          key: "refundAmount",
          align: "center",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.refundAmount / 100;
            return h("span", util.toMoney(item));
          },
        },
        {
          title: "清出金额",
          key: "clearAmount",
          align: "center",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.refundAmount / 100;
            return h("span", util.toMoney(item));
          },
        },
        {
          title: "订单状态",
          key: "subOrderStatus",
          align: "center",
          minWidth: 100,
        },
        {
          title: "核销时间",
          key: "verificationTime",
          align: "center",
          minWidth: 150,
        },
        {
          title: "异常备注",
          key: "exceptionDesc",
          align: "left",
          minWidth: 270,
          tooltip: true,
        }
      ],
      selectedData: [],
      searchModule: {
        id: [],
      },
      settleException: {
        platformHasAmount: 0, //平台有型差异（分）
        platformNoneAmount: 0, //平台无型差异（分）
        bilateralAmount: 0, //双边型差异
        exceptionTotal: 0, //差异合计
      },
      showRemark: false,
      remark: "",
      remarks: [
        { value: "银联侧故障", key: "a" },
        { value: "中台侧故障", key: "b" },
      ],
      sumiting:false
    };
  },

  computed: {
    queryParam: {
      get() {
        return this.$store.state[namespace].query;
      },
    },
  },
  methods: {
    //// 提交差异备注

    async submitDiffCause(e) {
      this.sumiting=true
      if (!this.remark) {
        this.$Message.error({
          content: "请选择异常原因！",
        });
        this.sumiting=false
        return;
      }
      if (!this.selectedData || this.selectedData.length === 0) {
        this.$Message.error({
          content: "请选择要异常备注的数据！",
        });
        this.sumiting=false
        return;
      }
      try {
        let subOrderIds=[]
        this.selectedData.map(item=>{
          subOrderIds.push(item.id)
        })
        let res = await this.$store.dispatch(
          `${this.namespace}/submitDiffCause`,
          { checkDetailIds: subOrderIds, markDesc: this.remark }
        );

        if (res.data.ret === 0) {
          this.selectedData = [];
          this.$Message.success({
            content: "备注成功！",
          });
          this.queryListData()
        } else {
          this.$Message.error({
            content: res.data.msg || "查询异常！",
          });
        }
        this.showRemark=false
        this.sumiting=false
      } catch (error) {
        this.$Message.error({
          content: error,
        });
        this.sumiting=false
      }
    },
    getYuan(amount) {
      return util.getYuan(amount || 0);
    },
    async querySettleException() {
      try {
        let res = await this.$store.dispatch(
          `${this.namespace}/querySettleException`,
          { checkCode: this.settleSummary.checkCode }
        );
        this.selectedData = [];
        if (res.data.ret === 0) {
          let data = res.data.data;
          let settleException = {
            platformHasAmount: 0, //平台有型差异（分）
            platformNoneAmount: 0, //平台无型差异（分）
            bilateralAmount: 0, //双边型差异
            exceptionTotal: 0, //差异合计
          };
          if (data) {
            settleException.platformHasAmount = data.platformHasAmount || 0;
            settleException.platformNoneAmount = data.platformNoneAmount || 0;
            settleException.bilateralAmount = data.bilateralAmount || 0;
            settleException.exceptionTotal =
              settleException.platformHasAmount +
              settleException.platformNoneAmount +
              settleException.bilateralAmount;
          }
          this.settleException = { ...settleException };
        } else {
          this.$Message.error({
            content: res.data.msg || "查询异常！",
          });
        }
      } catch (error) {
        this.selectedData = [];
        this.$Message.error({
          content: error,
        });
      }
    },

    async selectList(params) {
      this.selectedData = params;
    },
    // async selectList(params) {
    //   console.log('selectList:',params)
    //   try {
    //     let res = await this.$store.dispatch(
    //       `${namespace}/querySettleExceptionList`,
    //       params
    //     );
    //     if (res.data.ret === 0) {
    //       let data = res.data.data;
    //       console.log("querySettleException:", data);
    //       this.selectedData = data || [];
    //     } else {
    //       this.settleSummary = {};
    //       this.$Message.error({
    //         content: res.data.msg || "查询异常！",
    //       });
    //     }
    //   } catch (error) {
    //     this.selectedData = [];
    //     this.$Message.error({
    //       content: error,
    //     });
    //   }
    // },
    async queryListData() {
      this.$store.dispatch(`${this.namespace}/query`, {
        currentPage: 1,
        checkCode: this.settleSummary.checkCode, // 对账编号
        differentTypes: "1, 2, 3", // 差异类型
      });
    },
    handleShowRemark() {
      if (!this.selectedData || this.selectedData.length === 0) {
        this.$Message.error({
          content: "请选择要异常备注的数据！",
        });
        return;
      }
      this.showRemark = true;
    },
    remarkManage() {
      let routeData = this.$router.resolve({
        path: "/config/admin/configCenter/configDifference",
      });
      window.open(routeData.href, "_blank");
    },
    refreshRemark() {},
  },
};
</script>

<style scoped>
.row {
  line-height: 40px;
}
.href {
  font-size: small;
  text-align: right;
}
</style>
